fix: use physical marginRight for RTL nav offset (not logical)

In RTL, marginInlineEnd maps to physical left, which pushed
content toward the nav. Using physical marginRight correctly
offsets content away from the right-side nav.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/layout/AppShell.tsx

@@ -9,7 +9,7 @@ export function AppShell() {
   return (
     <div className="min-h-dvh">
       <DesktopNav />
-      <div className="flex flex-col min-h-dvh" style={{ marginInlineEnd: 'var(--desktop-nav-width, 0px)' }}>
+      <div className="flex flex-col min-h-dvh" style={{ marginRight: 'var(--desktop-nav-width, 0px)' }}>
         <Header />
         <main className="flex-1 pb-[calc(var(--bottom-nav-height)+env(safe-area-inset-bottom))] lg:pb-6">
           <div className="w-full max-w-[680px] mx-auto">

src/components/layout/Header.tsx

@@ -10,7 +10,7 @@ interface HeaderProps {
 export function Header({ coins = 0, gems = 0, level = 1, unreadCount = 0 }: HeaderProps) {
   return (
     <header className="sticky top-0 z-40 bg-bg-1/95 backdrop-blur-sm border-b border-white/6"
-      style={{ paddingTop: 'env(safe-area-inset-top)', marginInlineEnd: 'var(--desktop-nav-width)' }}>
+      style={{ paddingTop: 'env(safe-area-inset-top)', marginRight: 'var(--desktop-nav-width)' }}>
       <div className="flex items-center justify-between h-[var(--header-height)] px-5 max-w-[680px] mx-auto">
         <div className="flex items-center gap-3">
           <Link to="/" className="text-gold font-bold text-lg font-latin tracking-tight">