feat: add custom CSS save system with dual-editor interface

Implement complete custom CSS management system:
- Separate base CSS (readonly) and custom CSS (editable)
- Save custom CSS to Kirby backend per narrative
- Visual save button with state indicators (dirty/saving/success/error)
- CSRF-protected API endpoint for CSS operations
- Dual-editor StylesheetViewer (base + custom with edit mode toggle)
- Auto-format custom CSS with Prettier on edit mode exit

Backend changes:
- Add web2print Kirby plugin with POST/GET routes
- Add customCss field to narrative blueprint
- Add CSRF token meta tag in header
- Include customCss and modified timestamps in JSON template
- Install code-editor plugin for Kirby panel

Frontend changes:
- Refactor stylesheet store with baseCss/customCss refs
- Make content a computed property (baseCss + customCss)
- Add helper methods: replaceBlock, replaceInCustomCss, setCustomCss
- Update all components to use new store API
- Create SaveButton component with FAB design
- Redesign StylesheetViewer with collapsable sections
- Initialize store from narrative data on app mount

File changes:
- Rename stylesheet.css → stylesheet.print.css
- Update all references to new filename

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/SaveButton.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="save-button-wrapper">
+    <button
+      class="save-btn"
+      :class="{
+        'has-changes': isDirty,
+        'is-saving': isSaving,
+        'has-error': hasError,
+        'save-success': showSuccess
+      }"
+      :disabled="!isDirty || isSaving"
+      @click="handleSave"
+      :title="getTooltip()"
+    >
+      <!-- Save icon (default state) -->
+      <svg v-if="!isSaving && !showSuccess" class="save-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M17 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V7L17 3ZM19 19H5V5H16.17L19 7.83V19ZM12 12C10.34 12 9 13.34 9 15S10.34 18 12 18 15 16.66 15 15 13.66 12 12 12ZM6 6H15V10H6V6Z"/>
+      </svg>
+
+      <!-- Spinner (saving state) -->
+      <div v-if="isSaving" class="spinner"></div>
+
+      <!-- Success checkmark (brief animation) -->
+      <svg v-if="showSuccess" class="success-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z"/>
+      </svg>
+    </button>
+
+    <!-- Last saved timestamp -->
+    <div v-if="lastSavedFormatted" class="last-saved">
+      Saved: {{ lastSavedFormatted }}
+    </div>
+
+    <!-- Error message tooltip -->
+    <div v-if="hasError && saveError" class="error-tooltip">
+      {{ saveError }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useStylesheetStore } from '../stores/stylesheet';
+
+const stylesheetStore = useStylesheetStore();
+
+const isDirty = computed(() => stylesheetStore.isDirty);
+const isSaving = computed(() => stylesheetStore.isSaving);
+const saveError = computed(() => stylesheetStore.saveError);
+const lastSavedFormatted = computed(() => stylesheetStore.lastSavedFormatted);
+const hasError = computed(() => !!saveError.value);
+const showSuccess = ref(false);
+
+const handleSave = async () => {
+  const result = await stylesheetStore.saveCustomCss();
+
+  if (result.status === 'success') {
+    // Show success animation
+    showSuccess.value = true;
+    setTimeout(() => {
+      showSuccess.value = false;
+    }, 1500);
+  }
+  // Errors are handled in the store and reflected in hasError
+};
+
+const getTooltip = () => {
+  if (!isDirty.value) return 'No changes to save';
+  if (isSaving.value) return 'Saving...';
+  if (hasError.value) return saveError.value;
+  return 'Save custom CSS';
+};
+</script>
+
+<style scoped>
+.save-button-wrapper {
+  position: fixed;
+  top: 2rem;
+  right: 5rem;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.5rem;
+}
+
+.save-btn {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 50%;
+  border: none;
+  background: var(--color-interface-300, #ccc);
+  color: white;
+  cursor: not-allowed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.save-btn.has-changes {
+  background: var(--color-page-highlight, #ff8a50);
+  cursor: pointer;
+}
+
+.save-btn.has-changes:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+}
+
+.save-btn.is-saving {
+  cursor: wait;
+}
+
+.save-btn.has-error {
+  background: #e74c3c;
+}
+
+.save-btn.save-success {
+  background: #2ecc71;
+}
+
+.save-icon,
+.success-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  border-top: 2px solid white;
+  border-right: 2px solid transparent;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.last-saved {
+  font-size: 0.75rem;
+  color: var(--color-interface-600, #666);
+  background: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  white-space: nowrap;
+}
+
+.error-tooltip {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  background: #e74c3c;
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  max-width: 15rem;
+  word-wrap: break-word;
+  white-space: normal;
+}
+</style>