domma-cms 0.75.0 → 0.77.0

package/admin/js/templates/settings.html

@@ -1,498 +1,430 @@
-<div class="view-header">
-    <h1><span data-icon="settings"></span> Site Settings</h1>
-    <button id="save-settings-btn" class="btn btn-primary"><span data-icon="save"></span> Save</button>
-</div>
-
-<div class="tabs" id="settings-tabs">
-  <div class="tab-list">
-    <button class="tab-item active">General</button>
-    <button class="tab-item">SEO</button>
-    <button class="tab-item">Footer</button>
-    <button class="tab-item">Email / SMTP</button>
-    <button class="tab-item">Back to Top</button>
-    <button class="tab-item">Cookie Consent</button>
-    <button class="tab-item">Breadcrumbs</button>
-    <button class="tab-item">Custom CSS</button>
-    <button class="tab-item">Cache</button>
-  </div>
-  <div class="tab-content">
-
-    <!-- General -->
-    <div class="tab-panel active">
-      <div class="row mb-3">
-        <div class="col-6">
-          <label class="form-label">Site Title</label>
-          <input id="field-site-title" type="text" class="form-input" placeholder="My Site">
-        </div>
-        <div class="col-6">
-          <label class="form-label">Tagline</label>
-          <input id="field-tagline" type="text" class="form-input" placeholder="Built with Domma CMS">
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col">
-          <div class="card" style="background:var(--dm-surface-raised);">
-            <div class="card-body" style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
-              <span data-icon="droplet"></span>
-              <div style="flex:1 1 240px;">
-                <strong>Themes, fonts and element overrides moved.</strong>
-                <p class="text-muted" style="margin:.25rem 0 0;font-size:.85rem;">
-                  The site theme, admin theme, automatic day/night pair and typography now live in
-                  Content &rsaquo; Theme, alongside per-element theme overrides.
-                </p>
-              </div>
-              <a href="#/theme" class="btn btn-ghost btn-sm">Open Theme</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-6">
-          <label class="form-label" for="field-admin-home">Admin home</label>
-          <select id="field-admin-home" class="form-select"></select>
-          <small class="form-hint">The screen the admin opens on, and where Dashboard goes. Anyone without the
-            permission for it gets the built-in dashboard; a confined role keeps its own home (Roles &rsaquo; Admin area).</small>
-        </div>
-      </div>
-      <div class="row mt-3">
-        <div class="col-3">
-          <label class="form-label">Default Spacer Size (px)</label>
-          <input id="field-spacer-size" type="number" class="form-input" min="0" max="500" placeholder="40">
-          <small class="form-hint">Used as the default height when inserting a <code>[spacer]</code> shortcode from the
-            editor toolbar.</small>
-        </div>
-      </div>
-    </div>
+<!-- System › Site Settings. Bound with M.applyBindings - see admin/js/views/settings.js, which also inserts
+     the cache-entry row template (the router renders a templateUrl through _.render, eating any {{…}}).
+     No page heading: the Tool banner above is the heading; Save is a banner action (and Ctrl+S). -->
+<div class="stx">
+    <div class="stx-alert is-bad" data-bind-hidden="!errorText.value">
+        <span data-icon="x-circle" data-icon-size="16"></span>
+        <span><strong>Not saved.</strong> <span data-bind-text="errorText.value"></span></span></div>
+    <p class="stx-alert is-dirty" data-bind-hidden="!dirty.value">
+        <span data-icon="edit-3" data-icon-size="16"></span>
+        <span>Unsaved changes - Save (Ctrl+S) to apply them. Leave and they are kept as a draft for next time
+            (never the SMTP password).</span>
+        <span class="stx-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">Save</button></p>
 
-    <!-- SEO -->
-    <div class="tab-panel">
-      <div class="row mb-3">
-        <div class="col-8">
-          <label class="form-label">Default Site Title</label>
-          <input id="field-seo-title" type="text" class="form-input" placeholder="My Site">
-        </div>
-        <div class="col-4">
-          <label class="form-label">Title Separator</label>
-          <input id="field-seo-separator" type="text" class="form-input" placeholder=" | ">
-        </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <label class="form-label">Default Meta Description</label>
-          <input id="field-seo-desc" type="text" class="form-input" placeholder="Brief description of your site">
+    <div class="tabs stx-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">General <i class="stx-dot" data-bind-hidden="!tabs.value.general" title="Changed"></i></button>
+            <button type="button" class="tab-item">SEO <i class="stx-dot" data-bind-hidden="!tabs.value.seo" title="Changed"></i></button>
+            <button type="button" class="tab-item">Footer <i class="stx-dot" data-bind-hidden="!tabs.value.footer" title="Changed"></i></button>
+            <button type="button" class="tab-item">Email <i class="stx-dot" data-bind-hidden="!tabs.value.email" title="Changed"></i><i class="stx-dot is-bad" data-bind-hidden="!noSmtp.value || tabs.value.email" title="No SMTP host"></i></button>
+            <button type="button" class="tab-item">Back to top <i class="stx-dot" data-bind-hidden="!tabs.value.backToTop" title="Changed"></i></button>
+            <button type="button" class="tab-item">Cookie consent <i class="stx-dot" data-bind-hidden="!tabs.value.cookies" title="Changed"></i></button>
+            <button type="button" class="tab-item">Breadcrumbs <i class="stx-dot" data-bind-hidden="!tabs.value.breadcrumbs" title="Changed"></i></button>
+            <button type="button" class="tab-item">Custom CSS <i class="stx-dot" data-bind-hidden="!tabs.value.css" title="Changed"></i></button>
+            <button type="button" class="tab-item">Cache</button>
         </div>
-      </div>
-    </div>
 
-    <!-- Footer -->
-    <div class="tab-panel">
-      <div class="row mb-4">
-        <div class="col">
-          <label class="form-label">Copyright Text</label>
-          <input id="field-footer-copy" type="text" class="form-input" placeholder="© 2026 My Site">
-        </div>
-      </div>
-      <div class="row mb-4">
-        <div class="col">
-          <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-            <input id="field-footer-motion-toggle" type="checkbox" class="form-check"> Show &ldquo;Reduce motion&rdquo; switch
-          </label>
-          <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Adds an accessibility switch to the
-            footer letting visitors turn animations off. Turning this off only hides the control - visitors who already
-            set the preference, and anyone whose browser asks for reduced motion, still get a calmer site.</p>
-        </div>
-      </div>
-      <h3 class="mb-3" style="font-size:1rem;font-weight:600;">Social Media Icons</h3>
-      <p class="text-muted mb-3" style="font-size:.875rem;">Enter the full URL for each platform to show its icon in the
-        footer. Leave blank to hide.</p>
-      <div class="row mb-3">
-        <div class="col-6">
-          <label class="form-label">X / Twitter</label>
-          <input id="field-social-twitter" type="url" class="form-input" placeholder="https://x.com/yourhandle">
-        </div>
-        <div class="col-6">
-          <label class="form-label">Facebook</label>
-          <input id="field-social-facebook" type="url" class="form-input" placeholder="https://facebook.com/yourpage">
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-6">
-          <label class="form-label">Instagram</label>
-          <input id="field-social-instagram" type="url" class="form-input"
-                 placeholder="https://instagram.com/yourhandle">
-        </div>
-        <div class="col-6">
-          <label class="form-label">LinkedIn</label>
-          <input id="field-social-linkedin" type="url" class="form-input"
-                 placeholder="https://linkedin.com/company/yourcompany">
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-6">
-          <label class="form-label">GitHub</label>
-          <input id="field-social-github" type="url" class="form-input" placeholder="https://github.com/yourorg">
-        </div>
-        <div class="col-6">
-          <label class="form-label">YouTube</label>
-          <input id="field-social-youtube" type="url" class="form-input" placeholder="https://youtube.com/@yourchannel">
+        <!-- General -->
+        <div class="tab-panel active">
+            <div class="stx-card" data-bind-hidden="!problemsText.value">
+                <div class="stx-card-title">Needs attention
+                    <span data-help-title="Needs attention" data-help="Settings that are saved but quietly wrong - the same list the badge on Site Settings in the sidebar counts. They go away once fixed and saved."></span></div>
+                <div class="stx-problems" data-each="problems.value key=text"></div>
+            </div>
+            <div class="stx-card">
+                <div class="stx-card-title">Site</div>
+                <div class="stx-grid">
+                    <div>
+                        <label class="form-label" for="stx-title">Site title
+                            <span data-help="The site's name - in the browser tab after each page's own title, in search results and in the emails the site sends."></span></label>
+                        <input id="stx-title" type="text" class="form-input" placeholder="My Site" data-model="title.value">
+                    </div>
+                    <div>
+                        <label class="form-label" for="stx-tagline">Tagline</label>
+                        <input id="stx-tagline" type="text" class="form-input" placeholder="Built with Domma CMS" data-model="tagline.value">
+                    </div>
+                </div>
+            </div>
+            <div class="stx-card">
+                <div class="stx-card-title">Admin</div>
+                <div class="stx-grid">
+                    <div>
+                        <label class="form-label" for="stx-admin-home">Admin home
+                            <span data-help-title="Admin home" data-help="The screen the admin opens on, and where Dashboard goes. Anyone without the permission for it gets the built-in dashboard; a role confined to part of the admin keeps its own home (Roles › Admin area)."></span></label>
+                        <select id="stx-admin-home" class="form-select" data-model="adminHome.value"></select>
+                    </div>
+                    <div>
+                        <label class="form-label" for="stx-spacer">Default spacer size (px)
+                            <span data-help="The height a [spacer] shortcode gets when it is inserted from the page editor's toolbar."></span></label>
+                        <input id="stx-spacer" type="number" class="form-input" min="0" max="500" placeholder="40" data-model="spacerSize.value">
+                    </div>
+                </div>
+            </div>
+            <div class="stx-card stx-moved">
+                <span data-icon="droplet"></span>
+                <div class="stx-moved-text">
+                    <strong>Themes, fonts and element overrides</strong>
+                    <small>The site and admin themes, day/night switching and typography live in Content › Theme.</small>
+                </div>
+                <a href="#/theme" class="btn btn-sm btn-ghost">Open Theme</a>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <!-- Email / SMTP -->
-    <div class="tab-panel">
-      <!-- Shown by settings.js when smtp.host is empty. Without a host the CMS
-           falls back to an Ethereal test inbox, which ACCEPTS the mail and
-           reports success - so nothing anywhere else looks wrong. -->
-      <div id="smtp-unconfigured-notice" class="card mb-3" style="display:none;">
-        <div class="card-body" style="color:var(--dm-warning,#f59e0b);display:flex;align-items:flex-start;gap:.6rem;">
-          <span data-icon="warning"></span>
-          <span><strong>No SMTP host configured.</strong> Mail is going to a throwaway test inbox and will
-            <strong>not</strong> reach anyone - password resets and form notifications will look like they
-            sent. Set a host below and save.</span>
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-8">
-          <label class="form-label">SMTP Host</label>
-          <input id="field-smtp-host" type="text" class="form-input" placeholder="smtp.example.com">
-        </div>
-        <div class="col-4">
-          <label class="form-label">Port</label>
-          <input id="field-smtp-port" type="number" class="form-input" placeholder="587" value="587">
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-6">
-          <label class="form-label">Username</label>
-          <input id="field-smtp-user" type="text" class="form-input" placeholder="user@example.com" autocomplete="off">
-        </div>
-        <div class="col-6">
-          <label class="form-label">Password</label>
-          <input id="field-smtp-pass" type="password" class="form-input" placeholder="••••••••"
-                 autocomplete="new-password">
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col">
-          <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-            <input id="field-smtp-secure" type="checkbox" class="form-check"> Use TLS (port 465)
-          </label>
-          <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Enable for SMTPS. Leave off for
-            STARTTLS (port 587).</p>
-        </div>
-      </div>
-      <div class="row mb-4">
-        <div class="col-6">
-          <label class="form-label">From Address</label>
-          <input id="field-smtp-from-address" type="email" class="form-input" placeholder="noreply@example.com">
-        </div>
-        <div class="col-6">
-          <label class="form-label">From Name</label>
-          <input id="field-smtp-from-name" type="text" class="form-input" placeholder="My Website">
-        </div>
-      </div>
-      <div style="border-top:1px solid var(--dm-border,#333);padding-top:1rem;">
-        <p class="form-label" style="margin-bottom:.5rem;">Send Test Email</p>
-        <p class="text-muted" style="font-size:.8rem;margin-bottom:.75rem;">Save your SMTP settings first, then send a test to verify the configuration.</p>
-        <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;">
-          <input id="field-test-email-to" type="email" class="form-input" placeholder="recipient@example.com" style="max-width:280px;">
-          <button id="send-test-email-btn" class="btn btn-ghost btn-sm">
-            <span data-icon="mail"></span> Send Test
-          </button>
-          <span id="test-email-result" style="font-size:.85rem;"></span>
+        <!-- SEO -->
+        <div class="tab-panel">
+            <div class="stx-card">
+                <div class="stx-card-title">Search engines
+                    <span data-help-title="SEO defaults" data-help="Used on every page that does not set its own. A page's title becomes “Page title” + separator + default site title."></span></div>
+                <div class="stx-grid">
+                    <div>
+                        <label class="form-label" for="stx-seo-title">Default site title</label>
+                        <input id="stx-seo-title" type="text" class="form-input" placeholder="My Site" data-model="seoTitle.value">
+                    </div>
+                    <div>
+                        <label class="form-label" for="stx-seo-sep">Title separator</label>
+                        <input id="stx-seo-sep" type="text" class="form-input" placeholder=" | " data-model="seoSeparator.value">
+                    </div>
+                    <div class="stx-wide">
+                        <label class="form-label" for="stx-seo-desc">Default meta description
+                            <span data-help="The summary search engines show under a page that has no description of its own. About 150 characters is what they display."></span></label>
+                        <input id="stx-seo-desc" type="text" class="form-input" placeholder="Brief description of your site" data-model="seoDescription.value">
+                        <small class="stx-hint" data-bind-text="seoLength.value"></small>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
 
-
-    <!-- Back to Top -->
-    <div class="tab-panel">
-      <div class="mb-3">
-        <label class="form-label">Label <span class="text-muted" style="font-weight:400;">(optional)</span></label>
-        <input id="field-btt-label" type="text" class="form-input" placeholder="Back to top">
-        <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Leave blank for icon-only button.</p>
-      </div>
-      <div class="grid grid-cols-2 gap-3 mb-4">
-        <div>
-          <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-            <input id="field-btt-enabled" type="checkbox" class="form-check"> Enable Back to Top button
-          </label>
-        </div>
-        <div>
-          <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-            <input id="field-btt-smooth" type="checkbox" class="form-check"> Smooth scroll
-          </label>
-        </div>
-      </div>
-      <div class="grid grid-cols-2 gap-3">
-        <div>
-          <label class="form-label">Scroll Threshold (px)</label>
-          <input id="field-btt-threshold" type="number" class="form-input" placeholder="300">
-          <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Show button after scrolling this many pixels.</p>
-        </div>
-        <div>
-          <label class="form-label">Position</label>
-          <select id="field-btt-position" class="form-select">
-            <option value="bottom-right">Bottom Right</option>
-            <option value="bottom-left">Bottom Left</option>
-          </select>
-        </div>
-        <div>
-          <label class="form-label">Side Offset (px)</label>
-          <input id="field-btt-offset" type="number" class="form-input" placeholder="32">
-          <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Distance from the left or right
-            edge.</p>
-        </div>
-        <div>
-          <label class="form-label">Bottom Offset (px)</label>
-          <input id="field-btt-bottom-offset" type="number" class="form-input" placeholder="32">
-          <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Distance from the bottom edge.</p>
+        <!-- Footer -->
+        <div class="tab-panel">
+            <div class="stx-card">
+                <div class="stx-card-title">Footer</div>
+                <div class="stx-grid">
+                    <div class="stx-wide">
+                        <label class="form-label" for="stx-footer-copy">Copyright text</label>
+                        <input id="stx-footer-copy" type="text" class="form-input" placeholder="© 2026 My Site" data-model="footerCopyright.value">
+                    </div>
+                    <div class="stx-wide stx-setting">
+                        <label class="form-label" for="stx-motion">Show a “Reduce motion” switch
+                            <span data-help="An accessibility switch in the footer that lets visitors turn animations off. Turning this off only hides the switch - visitors who already chose it, and anyone whose browser asks for reduced motion, still get a calmer site."></span></label>
+                        <input id="stx-motion" type="checkbox" class="form-switch" data-model="footerMotionToggle.value">
+                    </div>
+                </div>
+            </div>
+            <div class="stx-card">
+                <div class="stx-card-title">Social media icons
+                    <span data-help="The full address of each profile - its icon then shows in the footer. Leave one empty to hide its icon."></span></div>
+                <div class="stx-grid">
+                    <div><label class="form-label" for="stx-s-tw">X / Twitter</label>
+                        <input id="stx-s-tw" type="url" class="form-input" placeholder="https://x.com/yourhandle" data-model="socialTwitter.value"></div>
+                    <div><label class="form-label" for="stx-s-fb">Facebook</label>
+                        <input id="stx-s-fb" type="url" class="form-input" placeholder="https://facebook.com/yourpage" data-model="socialFacebook.value"></div>
+                    <div><label class="form-label" for="stx-s-ig">Instagram</label>
+                        <input id="stx-s-ig" type="url" class="form-input" placeholder="https://instagram.com/yourhandle" data-model="socialInstagram.value"></div>
+                    <div><label class="form-label" for="stx-s-li">LinkedIn</label>
+                        <input id="stx-s-li" type="url" class="form-input" placeholder="https://linkedin.com/company/yourcompany" data-model="socialLinkedin.value"></div>
+                    <div><label class="form-label" for="stx-s-gh">GitHub</label>
+                        <input id="stx-s-gh" type="url" class="form-input" placeholder="https://github.com/yourorg" data-model="socialGithub.value"></div>
+                    <div><label class="form-label" for="stx-s-yt">YouTube</label>
+                        <input id="stx-s-yt" type="url" class="form-input" placeholder="https://youtube.com/@yourchannel" data-model="socialYoutube.value"></div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <!-- Cookie Consent -->
-    <div class="tab-panel">
-      <div class="row mb-3">
-        <div class="col">
-          <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-            <input id="field-cc-enabled" type="checkbox" class="form-check"> Enable Cookie Consent banner
-          </label>
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col">
-          <label class="form-label">Message</label>
-          <textarea id="field-cc-message" class="form-input" rows="3" placeholder="We use cookies…"></textarea>
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-3">
-          <label class="form-label">Accept All Text</label>
-          <input id="field-cc-accept-all" type="text" class="form-input" placeholder="Accept All">
-        </div>
-        <div class="col-3">
-          <label class="form-label">Reject All Text</label>
-          <input id="field-cc-reject-all" type="text" class="form-input" placeholder="Reject All">
-        </div>
-        <div class="col-3">
-          <label class="form-label">Customise Text</label>
-          <input id="field-cc-customize" type="text" class="form-input" placeholder="Customize">
-        </div>
-        <div class="col-3">
-          <label class="form-label">Save Preferences Text</label>
-          <input id="field-cc-save-prefs" type="text" class="form-input" placeholder="Save Preferences">
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-6">
-          <label class="form-label">Privacy Policy Text</label>
-          <input id="field-cc-privacy-text" type="text" class="form-input" placeholder="Privacy Policy">
-        </div>
-        <div class="col-6">
-          <label class="form-label">Privacy Policy URL</label>
-          <input id="field-cc-privacy-url" type="text" class="form-input" placeholder="/privacy-policy">
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-6">
-          <label class="form-label">Cookie Policy Text</label>
-          <input id="field-cc-cookie-text" type="text" class="form-input" placeholder="Cookie Policy">
-        </div>
-        <div class="col-6">
-          <label class="form-label">Cookie Policy URL <span class="text-muted" style="font-weight:400;">(leave blank to hide)</span></label>
-          <input id="field-cc-cookie-url" type="text" class="form-input" placeholder="/cookie-policy">
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-4">
-          <label class="form-label">Position</label>
-          <select id="field-cc-position" class="form-select">
-            <option value="bottom">Bottom</option>
-            <option value="top">Top</option>
-          </select>
-        </div>
-        <div class="col-4">
-          <label class="form-label">Layout</label>
-          <select id="field-cc-layout" class="form-select">
-            <option value="bar">Bar</option>
-            <option value="modal">Modal</option>
-          </select>
-        </div>
-        <div class="col-4">
-          <label class="form-label">Theme</label>
-          <select id="field-cc-theme" class="form-select">
-            <option value="dark">Dark</option>
-            <option value="light">Light</option>
-          </select>
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col">
-          <label class="form-label" style="margin-bottom:.5rem;">Cookie Categories</label>
-          <p class="text-muted" style="font-size:.8rem;margin-bottom:.75rem;">Necessary cookies are always shown and required. Toggle additional categories below.</p>
-          <div style="display:flex;flex-direction:column;gap:.5rem;">
-            <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-              <input id="field-cc-show-functional" type="checkbox" class="form-check"> Show Functional category
-            </label>
-            <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-              <input id="field-cc-show-analytics" type="checkbox" class="form-check"> Show Analytics category
-            </label>
-            <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-              <input id="field-cc-show-marketing" type="checkbox" class="form-check"> Show Marketing category
-            </label>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-4">
-          <label class="form-label">Consent Version</label>
-          <input id="field-cc-version" type="text" class="form-input" placeholder="1.0">
-          <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Increment to re-prompt users who already accepted.</p>
+        <!-- Email -->
+        <div class="tab-panel">
+            <!-- Without a host the CMS falls back to an Ethereal test inbox, which ACCEPTS the mail and reports
+                 success - so nothing anywhere else looks wrong. Follows the field, not only the saved value. -->
+            <p class="stx-alert is-warn" data-bind-hidden="!noSmtp.value">
+                <span data-icon="alert-triangle" data-icon-size="16"></span>
+                <span><strong>No SMTP host.</strong> Mail is going to a throwaway test inbox and will <strong>not</strong>
+                    reach anyone - password resets and form notifications will look like they sent. Set a host and save.</span></p>
+            <div class="stx-card">
+                <div class="stx-card-title">SMTP server
+                    <span data-help-title="SMTP" data-help="The mail server the site sends through - your email provider's (for example smtp.gmail.com, or your host's). Its username and password are the mail account's. The password is never shown again once saved: leave it empty to keep it, type a new one to change it."></span></div>
+                <div class="stx-grid">
+                    <div>
+                        <label class="form-label" for="stx-smtp-host">SMTP host</label>
+                        <input id="stx-smtp-host" type="text" class="form-input" placeholder="smtp.example.com" data-model="smtpHost.value">
+                    </div>
+                    <div>
+                        <label class="form-label" for="stx-smtp-port">Port
+                            <span data-help="587 for STARTTLS (most providers), 465 with “Use TLS” on, 25 only for a server on your own network."></span></label>
+                        <input id="stx-smtp-port" type="number" class="form-input" placeholder="587" data-model="smtpPort.value">
+                    </div>
+                    <div>
+                        <label class="form-label" for="stx-smtp-user">Username</label>
+                        <input id="stx-smtp-user" type="text" class="form-input" placeholder="user@example.com" autocomplete="off" data-model="smtpUser.value">
+                    </div>
+                    <div>
+                        <label class="form-label" for="stx-smtp-pass">Password</label>
+                        <input id="stx-smtp-pass" type="password" class="form-input" placeholder="Leave empty to keep the saved one" autocomplete="new-password" data-model="smtpPass.value">
+                    </div>
+                    <div class="stx-wide stx-setting">
+                        <label class="form-label" for="stx-smtp-secure">Use TLS (port 465)
+                            <span data-help="On for SMTPS (port 465). Off for STARTTLS (port 587), which upgrades to an encrypted connection anyway."></span></label>
+                        <input id="stx-smtp-secure" type="checkbox" class="form-switch" data-model="smtpSecure.value">
+                    </div>
+                </div>
+            </div>
+            <div class="stx-card">
+                <div class="stx-card-title">Sender
+                    <span data-help="Who the site's mail comes from. Most providers only accept a From address on the account (or domain) you sign in with."></span></div>
+                <div class="stx-grid">
+                    <div>
+                        <label class="form-label" for="stx-from-addr">From address</label>
+                        <input id="stx-from-addr" type="email" class="form-input" placeholder="noreply@example.com" data-model="smtpFromAddress.value">
+                    </div>
+                    <div>
+                        <label class="form-label" for="stx-from-name">From name</label>
+                        <input id="stx-from-name" type="text" class="form-input" placeholder="My Website" data-model="smtpFromName.value">
+                    </div>
+                </div>
+            </div>
+            <div class="stx-card">
+                <div class="stx-card-title">Send a test email
+                    <span data-help="Sends through the SAVED settings - Save first if you have changed anything above. Leave the address empty to send to the From address."></span></div>
+                <div class="stx-inline">
+                    <input type="email" class="form-input stx-test-to" placeholder="recipient@example.com" aria-label="Send the test to" data-model="testTo.value">
+                    <button type="button" class="btn btn-sm btn-ghost" data-on-click="sendTest" data-bind-disabled="testing.value">
+                        <span data-icon="mail" data-icon-size="14"></span> Send test</button>
+                    <span class="stx-result" data-bind-class="testTone.value" data-bind-text="testResult.value"></span>
+                </div>
+                <small class="stx-hint" data-bind-hidden="!dirtyEmail.value">You have unsaved email changes - the test uses the saved ones.</small>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <!-- Custom CSS -->
-    <!-- Breadcrumbs -->
-    <div class="tab-panel">
-      <div class="row mb-3">
-        <div class="col">
-          <div class="card">
-            <div class="card-header"><strong>Breadcrumb Navigation</strong></div>
-            <div class="card-body">
-              <p class="text-muted mb-3" style="font-size:.875rem;">
-                When enabled, a frosted pill breadcrumb trail is fixed to your chosen viewport corner on all public
-                pages.
-                Individual pages can opt-out via "Show Breadcrumbs" in the page editor.
-              </p>
-              <div class="row mb-4">
-                <div class="col-auto" style="display:flex;align-items:center;gap:.75rem;">
-                  <input id="field-breadcrumbs-enabled" type="checkbox" class="form-check">
-                  <label for="field-breadcrumbs-enabled">Enable breadcrumbs on all pages</label>
+        <!-- Back to top -->
+        <div class="tab-panel">
+            <div class="stx-card">
+                <div class="stx-card-title">Back to top button
+                    <span data-help="A button that appears once a visitor has scrolled down, and takes them back to the top of the page."></span></div>
+                <div class="stx-grid">
+                    <div class="stx-setting"><label class="form-label" for="stx-btt-on">Show the button</label>
+                        <input id="stx-btt-on" type="checkbox" class="form-switch" data-model="bttEnabled.value"></div>
+                    <div class="stx-setting"><label class="form-label" for="stx-btt-smooth">Smooth scroll</label>
+                        <input id="stx-btt-smooth" type="checkbox" class="form-switch" data-model="bttSmooth.value"></div>
+                    <div class="stx-wide">
+                        <label class="form-label" for="stx-btt-label">Label <small class="stx-muted">(optional - empty is icon-only)</small></label>
+                        <input id="stx-btt-label" type="text" class="form-input" placeholder="Back to top" data-model="bttLabel.value">
+                    </div>
+                    <div>
+                        <label class="form-label" for="stx-btt-thr">Appears after (px)
+                            <span data-help="How far a visitor has to scroll down before the button shows."></span></label>
+                        <input id="stx-btt-thr" type="number" class="form-input" placeholder="300" data-model="bttThreshold.value">
+                    </div>
+                    <div>
+                        <label class="form-label" for="stx-btt-pos">Position</label>
+                        <select id="stx-btt-pos" class="form-select" data-model="bttPosition.value">
+                            <option value="bottom-right">Bottom right</option>
+                            <option value="bottom-left">Bottom left</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="form-label" for="stx-btt-off">Side offset (px)</label>
+                        <input id="stx-btt-off" type="number" class="form-input" placeholder="32" data-model="bttOffset.value">
+                    </div>
+                    <div>
+                        <label class="form-label" for="stx-btt-boff">Bottom offset (px)</label>
+                        <input id="stx-btt-boff" type="number" class="form-input" placeholder="32" data-model="bttBottomOffset.value">
+                    </div>
                 </div>
-              </div>
+            </div>
+        </div>
 
-              <div class="row mb-4" style="align-items:flex-end;gap:0;">
-                <div class="col-4">
-                  <label class="form-label">Home label</label>
-                  <input id="field-breadcrumbs-home-label" type="text" class="form-input" placeholder="Home">
+        <!-- Cookie consent -->
+        <div class="tab-panel">
+            <div class="stx-card">
+                <div class="stx-card-title">Cookie consent banner
+                    <span data-help-title="Cookie consent" data-help="The banner that asks visitors which cookies they accept. Necessary cookies are always allowed; the categories below are the ones visitors can turn off. Raise the consent version to ask everyone again - after changing what the site stores, for example."></span></div>
+                <div class="stx-grid">
+                    <div class="stx-wide stx-setting"><label class="form-label" for="stx-cc-on">Show the banner</label>
+                        <input id="stx-cc-on" type="checkbox" class="form-switch" data-model="ccEnabled.value"></div>
+                    <div class="stx-wide">
+                        <label class="form-label" for="stx-cc-msg">Message</label>
+                        <textarea id="stx-cc-msg" class="form-input" rows="3" placeholder="We use cookies…" data-model="ccMessage.value"></textarea>
+                    </div>
+                    <div><label class="form-label" for="stx-cc-pos">Position</label>
+                        <select id="stx-cc-pos" class="form-select" data-model="ccPosition.value">
+                            <option value="bottom">Bottom</option><option value="top">Top</option></select></div>
+                    <div><label class="form-label" for="stx-cc-layout">Layout</label>
+                        <select id="stx-cc-layout" class="form-select" data-model="ccLayout.value">
+                            <option value="bar">Bar</option><option value="modal">Modal</option></select></div>
+                    <div><label class="form-label" for="stx-cc-theme">Colours</label>
+                        <select id="stx-cc-theme" class="form-select" data-model="ccTheme.value">
+                            <option value="dark">Dark</option><option value="light">Light</option></select></div>
+                    <div><label class="form-label" for="stx-cc-ver">Consent version</label>
+                        <input id="stx-cc-ver" type="text" class="form-input" placeholder="1.0" data-model="ccVersion.value"></div>
                 </div>
-              </div>
-
-              <label class="form-label" style="margin-bottom:.6rem;">Pill Position &amp; Offsets</label>
-              <div class="row" style="align-items:flex-start;gap:0;">
-
-                <!-- Corner picker -->
-                <div class="col-auto" style="margin-right:1.5rem;margin-bottom:1rem;">
-                  <div id="bc-pos-grid"
-                       style="display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid var(--dm-border,rgba(255,255,255,.1));border-radius:10px;overflow:hidden;background:var(--dm-border,rgba(255,255,255,.07));width:fit-content;">
-                    <button type="button" class="bc-pos-btn" data-pos="TL"
-                            style="display:flex;flex-direction:column;align-items:flex-start;padding:.55rem .8rem;background:none;border:none;cursor:pointer;font-size:.78rem;color:var(--dm-text-muted,#888);border-right:1px solid var(--dm-border,rgba(255,255,255,.08));border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));border-radius:0;gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:72px;">
-                      <span
-                          style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Top</span>
-                      <span style="font-weight:600;">↖ Left</span>
-                    </button>
-                    <button type="button" class="bc-pos-btn" data-pos="TR"
-                            style="display:flex;flex-direction:column;align-items:flex-end;padding:.55rem .8rem;background:none;border:none;cursor:pointer;font-size:.78rem;color:var(--dm-text-muted,#888);border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));border-radius:0;gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:72px;">
-                      <span
-                          style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Top</span>
-                      <span style="font-weight:600;">Right ↗</span>
-                    </button>
-                    <button type="button" class="bc-pos-btn" data-pos="BL"
-                            style="display:flex;flex-direction:column;align-items:flex-start;padding:.55rem .8rem;background:none;border:none;cursor:pointer;font-size:.78rem;color:var(--dm-text-muted,#888);border-right:1px solid var(--dm-border,rgba(255,255,255,.08));border-radius:0;gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:72px;">
-                      <span style="font-weight:600;">↙ Left</span>
-                      <span
-                          style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Bottom</span>
-                    </button>
-                    <button type="button" class="bc-pos-btn" data-pos="BR"
-                            style="display:flex;flex-direction:column;align-items:flex-end;padding:.55rem .8rem;background:none;border:none;cursor:pointer;font-size:.78rem;color:var(--dm-text-muted,#888);border-radius:0;gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:72px;">
-                      <span style="font-weight:600;">Right ↘</span>
-                      <span
-                          style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Bottom</span>
-                    </button>
-                  </div>
-                  <input type="hidden" id="field-breadcrumbs-position" value="TL">
+            </div>
+            <div class="stx-card">
+                <div class="stx-card-title">Categories</div>
+                <div class="stx-grid">
+                    <div class="stx-setting"><label class="form-label" for="stx-cc-fn">Functional</label>
+                        <input id="stx-cc-fn" type="checkbox" class="form-switch" data-model="ccShowFunctional.value"></div>
+                    <div class="stx-setting"><label class="form-label" for="stx-cc-an">Analytics</label>
+                        <input id="stx-cc-an" type="checkbox" class="form-switch" data-model="ccShowAnalytics.value"></div>
+                    <div class="stx-setting"><label class="form-label" for="stx-cc-mk">Marketing</label>
+                        <input id="stx-cc-mk" type="checkbox" class="form-switch" data-model="ccShowMarketing.value"></div>
                 </div>
-
-                <!-- Offsets -->
-                <div class="col-3" style="margin-right:1rem;">
-                  <label class="form-label" for="field-bc-offset-x">Horizontal offset</label>
-                  <div style="display:flex;align-items:center;gap:.4rem;">
-                    <input id="field-bc-offset-x" type="number" class="form-input" min="0" max="500" placeholder="8"
-                           style="max-width:90px;">
-                    <span class="text-muted" style="font-size:.8rem;">px</span>
-                  </div>
-                  <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.75rem;">Distance from left or
-                    right edge.</p>
+            </div>
+            <div class="stx-card">
+                <div class="stx-card-title">Links and button text</div>
+                <div class="stx-grid">
+                    <div><label class="form-label" for="stx-cc-pt">Privacy policy text</label>
+                        <input id="stx-cc-pt" type="text" class="form-input" placeholder="Privacy Policy" data-model="ccPrivacyText.value"></div>
+                    <div><label class="form-label" for="stx-cc-pu">Privacy policy address
+                        <span data-help="The page the banner's privacy link opens, such as /privacy. A banner with no privacy policy is flagged under Needs attention."></span></label>
+                        <input id="stx-cc-pu" type="text" class="form-input" placeholder="/privacy-policy" data-model="ccPrivacyUrl.value"></div>
+                    <div><label class="form-label" for="stx-cc-ct">Cookie policy text</label>
+                        <input id="stx-cc-ct" type="text" class="form-input" placeholder="Cookie Policy" data-model="ccCookieText.value"></div>
+                    <div><label class="form-label" for="stx-cc-cu">Cookie policy address <small class="stx-muted">(empty hides it)</small></label>
+                        <input id="stx-cc-cu" type="text" class="form-input" placeholder="/cookie-policy" data-model="ccCookieUrl.value"></div>
+                    <div><label class="form-label" for="stx-cc-aa">Accept all</label>
+                        <input id="stx-cc-aa" type="text" class="form-input" placeholder="Accept All" data-model="ccAcceptAll.value"></div>
+                    <div><label class="form-label" for="stx-cc-ra">Reject all</label>
+                        <input id="stx-cc-ra" type="text" class="form-input" placeholder="Reject All" data-model="ccRejectAll.value"></div>
+                    <div><label class="form-label" for="stx-cc-cz">Customise</label>
+                        <input id="stx-cc-cz" type="text" class="form-input" placeholder="Customize" data-model="ccCustomize.value"></div>
+                    <div><label class="form-label" for="stx-cc-sp">Save preferences</label>
+                        <input id="stx-cc-sp" type="text" class="form-input" placeholder="Save Preferences" data-model="ccSavePrefs.value"></div>
                 </div>
+            </div>
+        </div>
 
-                <div class="col-3">
-                  <label class="form-label" for="field-bc-offset-y">Vertical offset</label>
-                  <div style="display:flex;align-items:center;gap:.4rem;">
-                    <input id="field-bc-offset-y" type="number" class="form-input" min="0" max="500" placeholder="60"
-                           style="max-width:90px;">
-                    <span class="text-muted" style="font-size:.8rem;">px</span>
-                  </div>
-                  <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.75rem;">Distance from top or
-                    bottom edge.</p>
+        <!-- Breadcrumbs -->
+        <div class="tab-panel">
+            <div class="stx-card">
+                <div class="stx-card-title">Breadcrumb trail
+                    <span data-help-title="Breadcrumbs" data-help="A small frosted pill fixed to a corner of every public page, showing where the page sits (Home › Services › Web). A page can switch it off with “Show Breadcrumbs” in the page editor."></span></div>
+                <div class="stx-grid">
+                    <div class="stx-wide stx-setting"><label class="form-label" for="stx-bc-on">Show breadcrumbs on every page</label>
+                        <input id="stx-bc-on" type="checkbox" class="form-switch" data-model="bcEnabled.value"></div>
+                    <div><label class="form-label" for="stx-bc-home">Home label</label>
+                        <input id="stx-bc-home" type="text" class="form-input" placeholder="Home" data-model="bcHomeLabel.value"></div>
+                    <div></div>
+                    <div>
+                        <span class="form-label">Corner</span>
+                        <div class="stx-corners" role="group" aria-label="Corner">
+                            <button type="button" data-on-click="corner('TL')" data-bind-class="bcPosition.value === 'TL' && 'is-on'">↖ Top left</button>
+                            <button type="button" data-on-click="corner('TR')" data-bind-class="bcPosition.value === 'TR' && 'is-on'">Top right ↗</button>
+                            <button type="button" data-on-click="corner('BL')" data-bind-class="bcPosition.value === 'BL' && 'is-on'">↙ Bottom left</button>
+                            <button type="button" data-on-click="corner('BR')" data-bind-class="bcPosition.value === 'BR' && 'is-on'">Bottom right ↘</button>
+                        </div>
+                    </div>
+                    <div class="stx-pair">
+                        <div><label class="form-label" for="stx-bc-x">From the side (px)</label>
+                            <input id="stx-bc-x" type="number" class="form-input" min="0" max="500" placeholder="8" data-model="bcOffsetX.value"></div>
+                        <div><label class="form-label" for="stx-bc-y">From the top/bottom (px)</label>
+                            <input id="stx-bc-y" type="number" class="form-input" min="0" max="500" placeholder="8" data-model="bcOffsetY.value"></div>
+                    </div>
                 </div>
-              </div>
-
             </div>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <button id="save-breadcrumbs-btn" class="btn btn-primary"><span data-icon="save"></span> Save Breadcrumbs Settings</button>
         </div>
-      </div>
-    </div>
 
-    <!-- Custom CSS -->
-    <div class="tab-panel">
-      <div class="row mb-3">
-        <div class="col">
-          <p class="text-muted" style="font-size:.875rem;margin-bottom:1rem;">
-            CSS entered here is injected as an inline <code>&lt;style&gt;</code> block into the
-            <code>&lt;head&gt;</code> of every public page. Changes take effect immediately on save.
-          </p>
-          <textarea id="field-custom-css" class="form-input" style="font-family:monospace;min-height:420px;resize:vertical;" spellcheck="false" placeholder="/* Add your custom CSS here */"></textarea>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <button id="save-css-btn" class="btn btn-primary"><span data-icon="save"></span> Save CSS</button>
+        <!-- Custom CSS -->
+        <div class="tab-panel">
+            <div class="stx-card">
+                <div class="stx-card-title">Custom CSS
+                    <span data-help="Added to the head of every public page, after the theme - so it has the last word. Saved with everything else (Save, or Ctrl+S). Up to 100 KB."></span></div>
+                <textarea class="form-input stx-css" spellcheck="false" placeholder="/* Add your custom CSS here */"></textarea>
+                <small class="stx-hint" data-bind-text="cssSize.value"></small>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <!-- Cache -->
-    <div class="tab-panel">
-      <div class="row mb-3">
-        <div class="col">
-          <p class="text-muted" style="font-size:.875rem;margin-bottom:1rem;">
-            Status: <strong id="cache-status">checking…</strong>
-          </p>
-          <p class="text-muted" style="font-size:.875rem;margin-bottom:1rem;">
-            Public page renders are cached by URL and role. Writes (page, collection, form, block, view, navigation, site settings) auto-invalidate the relevant tags. Use the button below to flush every cached entry - the next visitor to each page will trigger a fresh render.
-          </p>
-          <button id="btn-clear-cache" class="btn btn-secondary" type="button"><span data-icon="trash"></span> Clear cache</button>
-          <button id="btn-refresh-cache-keys" class="btn btn-ghost" type="button" style="margin-left:8px;"><span data-icon="refresh"></span> Refresh list</button>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <h4 style="margin-top:1.5rem;">Cached entries <span id="cache-key-count" class="text-muted" style="font-weight:normal;font-size:.875rem;"></span></h4>
-          <p class="text-muted" style="font-size:.85rem;margin-bottom:.5rem;">
-            Snapshot of what's currently keyed. Newest entries first. Values are not shown - they can be large HTML blobs.
-          </p>
-          <div id="cache-keys-table"></div>
+        <!-- Cache -->
+        <div class="tab-panel">
+            <div class="stx-card">
+                <div class="stx-card-title">Response cache
+                    <span data-help-title="Response cache" data-help="Public pages are kept rendered, per address and per visitor role, so the next visitor gets them at once. Saving a page, collection, form, block, view, menu or these settings clears what it affects automatically; Clear empties it all. Turning it off makes every visit render afresh - useful while debugging, slower for visitors."></span>
+                    <span class="stx-spacer"></span>
+                    <button type="button" class="btn btn-sm btn-ghost" data-on-click="refreshCache"><span data-icon="refresh-cw" data-icon-size="14"></span> Refresh</button>
+                    <button type="button" class="btn btn-sm btn-ghost" data-on-click="toggleCache" data-bind-text="cacheToggleText.value">Turn off</button>
+                    <button type="button" class="btn btn-sm btn-outline" data-on-click="clearCache"><span data-icon="trash" data-icon-size="14"></span> Clear</button>
+                </div>
+                <div class="stx-chips">
+                    <span class="stx-chip" data-bind-class="cacheOn.value ? 'is-ok' : 'is-warn'" data-bind-text="cacheState.value"></span>
+                    <span class="stx-chip" data-bind-hidden="!cacheSize.value" data-bind-text="cacheSize.value"></span>
+                    <span class="stx-chip" data-bind-hidden="!cacheHits.value" data-bind-text="cacheHits.value"></span>
+                </div>
+            </div>
+            <div class="stx-card">
+                <div class="stx-card-title">Cached pages <span class="stx-count" data-bind-text="cacheRows.value.length"></span>
+                    <span data-help="What is in the cache now, newest first: the page, the visitor role it was rendered for, and when it expires. Right-click one (or ⋮) to open the page or copy its key."></span>
+                    <span class="stx-spacer"></span>
+                    <input type="search" class="form-input stx-search" placeholder="Filter…" aria-label="Filter cached pages" data-model="cacheQuery.value">
+                </div>
+                <p class="stx-note" data-bind-hidden="!cacheLoading.value">Loading…</p>
+                <p class="stx-note is-bad" data-bind-hidden="!cacheError.value" data-bind-text="cacheError.value"></p>
+                <p class="stx-note" data-bind-hidden="cacheLoading.value || cacheError.value || cacheRows.value.length" data-bind-text="cacheEmpty.value"></p>
+                <div class="stx-list" data-each="cacheRows.value key=id"></div>
+            </div>
         </div>
-      </div>
     </div>
-
-  </div>
 </div>
+
+<style>
+.stx { display: flex; flex-direction: column; gap: .75rem; }
+.stx [hidden] { display: none !important; }
+.stx-alert { margin: 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .6rem .8rem; border-radius: var(--dm-radius-md); color: var(--dm-text); }
+.stx-alert.is-dirty { background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.stx-alert.is-warn { background: color-mix(in srgb, var(--dm-warning) 16%, transparent); }
+.stx-alert.is-bad { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); }
+.stx-spacer { flex: 1; }
+.stx-alert.is-dirty > span:nth-child(2) { flex: 1 1 18rem; min-width: 0; }
+.stx-tabs .tab-item { display: inline-flex; align-items: center; gap: .35rem; }
+.stx-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--dm-primary); }
+.stx-dot.is-bad { background: var(--dm-danger); }
+.stx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .65rem; margin-top: .75rem; }
+.stx-card-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; flex-wrap: wrap; }
+.stx-card-title .btn { display: inline-flex; align-items: center; gap: .3rem; font-weight: 500; }
+.stx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
+.stx-wide { grid-column: 1 / -1; }
+.stx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
+.stx .form-label { display: flex; align-items: center; gap: .3rem; }
+.stx-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.stx-setting .form-label { margin: 0; }
+.stx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.stx-muted { color: var(--dm-text-muted); font-weight: 400; }
+.stx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.stx-note.is-bad { color: var(--dm-danger); }
+.stx-moved { flex-direction: row; align-items: center; gap: .75rem; background: var(--dm-surface-raised); }
+.stx-moved-text { flex: 1; display: flex; flex-direction: column; }
+.stx-moved-text small { color: var(--dm-text-muted); }
+.stx-problems { display: flex; flex-direction: column; gap: .35rem; }
+.stx-problem { display: flex; align-items: center; gap: .6rem; font-size: var(--dm-text-sm); }
+.stx-problem button { margin-left: auto; }
+.stx-inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
+.stx-inline .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.stx-test-to { max-width: 18rem; }
+.stx-result { font-size: var(--dm-text-sm); }
+.stx-result.is-ok { color: var(--dm-success); }
+.stx-result.is-bad { color: var(--dm-danger); }
+.stx-corners { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; width: fit-content; }
+.stx-corners button { border: 0; background: none; color: var(--dm-text); padding: .45rem .8rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.stx-corners button:nth-child(odd) { border-right: 1px solid var(--dm-border); }
+.stx-corners button:nth-child(-n+2) { border-bottom: 1px solid var(--dm-border); }
+.stx-corners button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.stx-corners button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.stx-css { width: 100%; min-height: 420px; font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); }
+.stx-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
+.stx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.stx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.stx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.stx-chip.is-bad { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.stx-count { opacity: .65; font-size: var(--dm-text-xs); font-weight: 500; }
+.stx-search { max-width: 14rem; font-weight: 400; }
+.stx-list { display: flex; flex-direction: column; }
+.stx-row { display: flex; align-items: center; gap: .75rem; padding: .45rem .3rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.stx-row:last-child { border-bottom: 0; }
+.stx-row:hover, .stx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.stx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.stx-main strong, .stx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.stx-main strong { font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); font-weight: 600; }
+.stx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.stx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.stx-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 720px) { .stx-grid, .stx-pair { grid-template-columns: 1fr; } }
+</style>