feat: sync all BRAIN mobile changes - onboarding, cookies, legal, mobile UX, settings

- Add OnboardingWizard, BetaBanner, CookieBanner components
- Add legal pages (Privacy, Terms, Cookies)
- Update Layout with mobile topbar, sidebar drawer, plan banner
- Update SettingsPage with profile, API config, security
- Update CharacterForm with topic suggestions, niche chips
- Update EditorialCalendar with shared strategy card
- Update ContentPage with narrative technique + brief
- Update SocialAccounts with 4 platforms and token guides
- Fix CSS button color inheritance, mobile responsive
- Add backup script
- Update .gitignore for pgdata and backups

Co-Authored-By: Claude (BRAIN/StackOS) <noreply@anthropic.com>

frontend/src/index.css

@@ -29,8 +29,26 @@
 
 * {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
+/* Prevent buttons from inheriting unexpected colors */
+button {
+  color: inherit;
+  font-family: inherit;
+}
+/* ─── Base layout — mobile-first ───────────────────────────────── */
+html, body {
+  height: 100%;
+  overflow-x: hidden;
+}
+
+#root {
+  min-height: 100dvh;
+}
+
+
+
 body {
   background-color: var(--cream);
   color: var(--ink);
@@ -175,3 +193,48 @@ h1, h2, h3, h4 {
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
+
+/* ─── Mobile / Responsive ───────────────────────────────────── */
+@media (max-width: 767px) {
+  /* Minimum touch target size */
+  button, a, [role="button"] {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  /* Prevent iOS font size zoom on inputs */
+  input, select, textarea {
+    font-size: 16px !important;
+  }
+  /* Cards stack nicely on mobile */
+  .card-editorial {
+    padding: 1.25rem !important;
+  }
+  /* Legal pages readable on small screens */
+  .legal-content table {
+    font-size: 0.78rem;
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Fix ghost navbar space on mobile */
+  #root {
+    min-height: 100dvh;
+    min-height: -webkit-fill-available;
+  }
+
+  /* Ensure secondary buttons always look like buttons on mobile */
+  .btn-outline, .btn-primary {
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+
+/* ─── Mobile UX improvements ───────────────────────────────────── */
+/* ─── Print ─────────────────────────────────────────────────── */
+@media print {
+  aside, footer, .cookie-banner { display: none !important; }
+}