polish(design-v2): settings reorder + section cards + cog + yellow active

User-reported gaps:
- Settings section order: Account top, Theme middle, Design bottom,
  Install at end (was Install/Design/Theme/Account)
- Settings sections wrapped in glass cards with backdrop blur so they
  read against the harbor backdrop (was flat text)
- Desktop settings now 2-column grid; section cards pack in pairs
- FrameCard cog button: was white-opaque, now dark glass with light
  icon so it sits cleanly on the v2 dark photo backdrop
- Orientation picker active state: yellow border + yellow diagram tint
  (was theme primary which clashed with the dusks aesthetic)

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

frontend/src/styles/design-v2.scss

@@ -126,6 +126,32 @@
     font-size: var(--text-xl);
   }
 
+  // FrameCard settings cog: was white (95% opacity) — replace with dark glass + light icon
+  .frame-card__settings-btn {
+    background: rgba(8, 18, 30, 0.55) !important;
+    color: var(--color-text) !important;
+    border: 1px solid var(--color-border) !important;
+    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.5) !important;
+  }
+  .frame-card__settings-btn:hover {
+    background: rgba(8, 18, 30, 0.75) !important;
+  }
+
+  // Orientation picker: active border in YELLOW (was theme primary)
+  .orientation-opt--active {
+    border-color: var(--brand-yellow) !important;
+    background: color-mix(in srgb, var(--brand-yellow) 12%, var(--color-surface)) !important;
+  }
+  .orientation-opt {
+    background: var(--color-surface);
+    border-color: var(--color-border);
+    color: var(--color-text);
+  }
+  .orientation-opt__label { color: var(--color-text); }
+  .orientation-opt__sub { color: var(--color-text-muted); }
+  .orientation-opt__diagram { color: var(--color-text-muted); }
+  .orientation-opt--active .orientation-opt__diagram { color: var(--brand-yellow); }
+
   .home-view__empty-title { font-family: var(--font-display-v2); }
   .library__add-btn { background: var(--color-primary); color: var(--color-primary-fg); }
 
@@ -150,6 +176,35 @@
     &__row-value,
     &__action-link { color: var(--color-text); }
     &__logout { color: var(--color-destructive); }
+
+    // Each section gets a glass card background so it reads against the harbor
+    &__section {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-lg);
+      padding: var(--space-5);
+      backdrop-filter: saturate(160%) blur(20px);
+      -webkit-backdrop-filter: saturate(160%) blur(20px);
+      box-shadow:
+        0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent) inset,
+        0 16px 32px -12px rgba(0,0,0,0.5);
+      // override the v1 margin-bottom which collapses between cards
+      margin-bottom: var(--space-4);
+    }
+  }
+
+  // Desktop: 2-column settings layout — first 4 sections in pairs,
+  // each section is a column-flex auto. Sections naturally pack in pairs.
+  @media (min-width: 960px) {
+    .settings {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: var(--space-5);
+      align-items: start;
+
+      &__title { grid-column: 1 / -1; }
+      &__section { margin-bottom: 0; }
+    }
   }
 
   .design-toggle__opt {

frontend/src/views/SettingsView.vue

@@ -2,57 +2,16 @@
   <main class="settings">
     <h1 class="settings__title">Settings</h1>
 
-    <section v-if="!isStandalone" class="settings__section">
-      <h2 class="settings__section-title">Install app</h2>
-      <p class="settings__hint">
-        Pin WeVisto to your home screen so it opens like a native app.
-      </p>
-      <button
-        v-if="canPromptInstall"
-        type="button"
-        class="settings__install"
-        @click="onNativeInstall"
-      >
-        Install WeVisto
-      </button>
-      <button
-        v-else
-        type="button"
-        class="settings__install"
-        @click="showIosInstructions = true"
-      >
-        Add to Home Screen
-      </button>
-    </section>
-
     <section class="settings__section">
-      <h2 class="settings__section-title">Design (beta)</h2>
+      <h2 class="settings__section-title">Account</h2>
-      <p class="settings__hint">
+      <div class="settings__row">
-        Try the new atmospheric look. Your theme picks below still apply —
+        <span class="settings__row-label">Signed in as</span>
-        v2 just renders them as dusks over a Camogli harbor backdrop.
+        <span class="settings__row-value">{{ auth.user?.email }}</span>
-      </p>
-      <div class="design-toggle" role="radiogroup" aria-label="Design version">
-        <button
-          type="button"
-          role="radio"
-          :aria-checked="currentDesign === 'v1'"
-          :class="['design-toggle__opt', { 'design-toggle__opt--active': currentDesign === 'v1' }]"
-          @click="selectDesign('v1')"
-        >
-          <span class="design-toggle__label">Original</span>
-          <span class="design-toggle__sub">cream &amp; terracotta</span>
-        </button>
-        <button
-          type="button"
-          role="radio"
-          :aria-checked="currentDesign === 'v2'"
-          :class="['design-toggle__opt', { 'design-toggle__opt--active': currentDesign === 'v2' }]"
-          @click="selectDesign('v2')"
-        >
-          <span class="design-toggle__label">Atmospheric</span>
-          <span class="design-toggle__sub">harbor dusks · beta</span>
-        </button>
       </div>
+      <button type="button" class="settings__action-link" @click="passwordModalOpen = true">
+        Change password
+      </button>
+      <a href="/logout" class="settings__logout">Sign out</a>
     </section>
 
     <section class="settings__section">
@@ -80,15 +39,56 @@
     </section>
 
     <section class="settings__section">
-      <h2 class="settings__section-title">Account</h2>
+      <h2 class="settings__section-title">Design (beta)</h2>
-      <div class="settings__row">
+      <p class="settings__hint">
-        <span class="settings__row-label">Signed in as</span>
+        Try the new atmospheric look. Your theme picks above still apply —
-        <span class="settings__row-value">{{ auth.user?.email }}</span>
+        v2 just renders them as dusks over a Camogli harbor backdrop.
-      </div>
+      </p>
-      <button type="button" class="settings__action-link" @click="passwordModalOpen = true">
+      <div class="design-toggle" role="radiogroup" aria-label="Design version">
-        Change password
+        <button
+          type="button"
+          role="radio"
+          :aria-checked="currentDesign === 'v1'"
+          :class="['design-toggle__opt', { 'design-toggle__opt--active': currentDesign === 'v1' }]"
+          @click="selectDesign('v1')"
+        >
+          <span class="design-toggle__label">Original</span>
+          <span class="design-toggle__sub">cream &amp; terracotta</span>
+        </button>
+        <button
+          type="button"
+          role="radio"
+          :aria-checked="currentDesign === 'v2'"
+          :class="['design-toggle__opt', { 'design-toggle__opt--active': currentDesign === 'v2' }]"
+          @click="selectDesign('v2')"
+        >
+          <span class="design-toggle__label">Atmospheric</span>
+          <span class="design-toggle__sub">harbor dusks · beta</span>
+        </button>
+      </div>
+    </section>
+
+    <section v-if="!isStandalone" class="settings__section">
+      <h2 class="settings__section-title">Install app</h2>
+      <p class="settings__hint">
+        Pin WeVisto to your home screen so it opens like a native app.
+      </p>
+      <button
+        v-if="canPromptInstall"
+        type="button"
+        class="settings__install"
+        @click="onNativeInstall"
+      >
+        Install WeVisto
+      </button>
+      <button
+        v-else
+        type="button"
+        class="settings__install"
+        @click="showIosInstructions = true"
+      >
+        Add to Home Screen
       </button>
-      <a href="/logout" class="settings__logout">Sign out</a>
     </section>
 
     <div

public/build/index.html

@@ -17,9 +17,9 @@
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
     <meta name="apple-mobile-web-app-title" content="WeVisto" />
-    <script type="module" crossorigin src="/build/assets/index-COGnbSsR.js"></script>
+    <script type="module" crossorigin src="/build/assets/index-CToMjSpo.js"></script>
     <link rel="modulepreload" crossorigin href="/build/assets/_plugin-vue_export-helper-BNDVmFr7.js">
-    <link rel="stylesheet" crossorigin href="/build/assets/index-Dg_j878j.css">
+    <link rel="stylesheet" crossorigin href="/build/assets/index-DVLiEb9t.css">
   </head>
   <body>
     <div id="app"></div>