/* ============================================================
   BACK-TO-HUB — zero-edit, drop in as-is.

   Every app in the VisionVix ecosystem is reached through
   visionvix.store/<appname> (a Vercel rewrite proxying to this app's
   own, separately-deployed Vercel project — see LESSONS-LEARNED-SEED.md's
   "wiring into a store/hub" entries for the full mechanism). A user
   arriving that way needs a persistent way back to the hub regardless
   of which internal screen/route they're currently on.

   Add this markup once, as a sibling of .status-bar inside
   .app-surface, BEFORE #app -- same overlay technique app-shell.css
   already uses for .status-bar itself, so it renders above every
   screen without being injected per-route:

     <div class="app-surface">
       <div class="status-bar"></div>
       <a href="/me" class="back-to-hub" aria-label="Back to My Apps">
         <span class="back-to-hub-arrow">‹</span>My Apps
       </a>
       <div id="app" class="app-root" ...>
     </div>

   This link only works when the app is actually reached through the
   store proxy -- /me only exists there. On this app's own direct
   domain it's a harmless dead link, which is the correct trade-off:
   the store path is the intended way real users reach this app,
   the direct domain is for testing/preview only.
   ============================================================ */

.back-to-hub {
  position: absolute;
  z-index: 25;
  top: calc(var(--safe-top) + 8px);
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(15, 15, 25, 0.14);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary, #104d1f);
  text-decoration: none;
  pointer-events: auto;
}

.back-to-hub-arrow {
  font-size: 16px;
  line-height: 1;
  transform: translateY(-0.5px);
}