fix(design-v2): side rail subtitle + footer signature + theme swatch harbor

Mockup vs live diff revealed:
- Side rail brand area: mockup has italic '— home/library/settings' subtitle
  below WeVisto, live had none. Added via reactive activeSub computed.
- Side rail footer: mockup has 'a frame, gifted · v 0.4' italic at the
  bottom of the rail. Added top-nav__foot element; hidden in horizontal
  layouts, shown in v2 side rail via design-v2.scss
- Side rail mark size: bumped from 36px to 44px to match mockup
- Theme swatch harbor preview wasn't winning the cascade fight against
  Vue scoped styles (equal-specificity tie, Vue cascades later). Adding
  !important on the few preview properties — v2 is opt-in so this is
  appropriate.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/styles/design-v2.scss

@@ -39,8 +39,26 @@
         padding-bottom: 20px;
         margin-bottom: 16px;
         border-bottom: 1px solid var(--color-border);
+        align-items: flex-start;
+      }
+      &__mark {
+        width: 44px !important;
+        height: 44px !important;
+        border-radius: 10px !important;
+      }
+      &__wordmark { font-size: var(--text-xl); font-family: var(--font-display-v2); font-weight: 400; }
+
+      &__sub {
+        display: block;
+        font-family: var(--font-accent-v2);
+      }
+
+      &__foot {
+        display: block;
+        margin-top: auto;
+        font-family: var(--font-accent-v2);
+        border-top-color: var(--color-border);
       }
-      &__wordmark { font-size: var(--text-xl); }
 
       &__tabs {
         flex-direction: column;
@@ -124,18 +142,22 @@
   .design-toggle__sub { color: var(--color-text-muted); }
 
   // ── Theme swatches preview their dusk via the harbor.jpg ───────────
+  // `!important` needed because Vue's scoped style on SettingsView
+  // (.theme-swatch__preview[data-v-xxx] { background: var(--swatch-bg) })
+  // ties on specificity and cascades later. v2 is opt-in so overriding is OK.
   .theme-swatch {
     border-color: var(--color-border);
-    background: var(--color-surface);
+    background: var(--color-surface) !important;
     color: var(--color-text);
 
     &--active { border-color: var(--brand-yellow); }
     &__label { color: var(--color-text); }
 
     &__preview {
-      background-image: url('/build/assets/harbor.jpg');
-      background-size: cover;
-      background-position: center;
+      background: transparent !important;
+      background-image: url('/build/assets/harbor.jpg') !important;
+      background-size: cover !important;
+      background-position: center !important;
       position: relative;
       overflow: hidden;
       &::after {