Add configurable surface/sidebar colour + clearer sync-icon state

- new user_settings.surface_color (nullable, device-local default, not synced):
  drives the web sidebar / top bar / surfaces; NULL derives from bg_color as
  before. Added to schema, migration, GET/PUT, NULLABLE_OVERRIDES, DEFAULT_SYNC.
- web: surface colour row in the settings table; applyTheme derives the whole
  surface family from it
- web: per-row sync icon now has real styling — ON shows the primary-tinted
  glyph on a pill, OFF shows a slashed, muted glyph (was previously unstyled,
  so synced/not-synced looked identical)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/js/settings-sync.js

@@ -13,6 +13,7 @@ export const DEFAULT_COLORS = {
   text_color:          '#FFFFFF',
   bg_color:            '#000000',
   line_color:          '#3A3A52',
+  surface_color:       '#1A1A1A',
   month_divider_color: '#7090C0',
   month_label_color:   '#7090C0',
 };
@@ -60,6 +61,7 @@ export const SETTING_GROUPS = [
       { key: 'today_color',         labelKey: 'settings_today_color',         type: 'color' },
       { key: 'text_color',          labelKey: 'settings_text_color',          type: 'color' },
       { key: 'bg_color',            labelKey: 'settings_bg_color',            type: 'color' },
+      { key: 'surface_color',       labelKey: 'settings_surface_color',       type: 'color' },
       { key: 'line_color',          labelKey: 'settings_line_color',          type: 'color' },
       { key: 'month_divider_color', labelKey: 'settings_month_divider_color', type: 'color' },
       { key: 'month_label_color',   labelKey: 'settings_month_label_color',   type: 'color' },