fix(ui): native inputs/checkboxes, QR fallback, focus + report modal cleanup

- N23 RoomServerACL: raw text input -> folds Input; raw checkbox -> folds Checkbox
- N24 PolicyListViewer: raw room-id input -> folds Input (Critical variant on error)
- N25 ExportRoomHistory: raw <input type="date"> x2 -> folds Input
- N26 RoomShareInvite: QR <img> gets loading="lazy" + onError fallback card
  ("QR code unavailable") instead of a broken-image icon
- N27 GifPicker: FocusTrap returnFocusOnDeactivate:false (matches EmojiBoard)
- N76 Report modals: drop redundant Cancel button (dismiss via header x /
  click-outside, like MessageReportItem)
- N5 ReadReceiptAvatars: hover/focus moved to co-located css :hover/:focus-visible
  (removed JS onMouseEnter/Leave .style mutation)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/room-settings/ExportRoomHistory.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { Box, Button, Icon, IconButton, Icons, Scroll, Spinner, Text, config, color } from 'folds';
+import { Box, Button, Icon, IconButton, Icons, Input, Scroll, Spinner, Text } from 'folds';
 import { EventType } from 'matrix-js-sdk';
 import { Page, PageContent, PageHeader } from '../../components/page';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -255,40 +255,24 @@ ${msgRows}
                   <Box gap="400" wrap="Wrap">
                     <Box direction="Column" gap="100" style={{ flex: 1, minWidth: 160 }}>
                       <Text size="T300">From</Text>
-                      <input
+                      <Input
                         type="date"
+                        variant="Secondary"
+                        size="400"
+                        radii="300"
                         value={fromDate}
                         onChange={(e) => setFromDate(e.target.value)}
-                        style={{
-                          background: color.Surface.Container,
-                          color: color.Surface.OnContainer,
-                          border: `1px solid ${color.Surface.ContainerLine}`,
-                          borderRadius: config.radii.R300,
-                          padding: `${config.space.S200} ${config.space.S300}`,
-                          fontSize: 'inherit',
-                          fontFamily: 'inherit',
-                          width: '100%',
-                          boxSizing: 'border-box',
-                        }}
                       />
                     </Box>
                     <Box direction="Column" gap="100" style={{ flex: 1, minWidth: 160 }}>
                       <Text size="T300">To</Text>
-                      <input
+                      <Input
                         type="date"
+                        variant="Secondary"
+                        size="400"
+                        radii="300"
                         value={toDate}
                         onChange={(e) => setToDate(e.target.value)}
-                        style={{
-                          background: color.Surface.Container,
-                          color: color.Surface.OnContainer,
-                          border: `1px solid ${color.Surface.ContainerLine}`,
-                          borderRadius: config.radii.R300,
-                          padding: `${config.space.S200} ${config.space.S300}`,
-                          fontSize: 'inherit',
-                          fontFamily: 'inherit',
-                          width: '100%',
-                          boxSizing: 'border-box',
-                        }}
                       />
                     </Box>
                   </Box>