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/RoomServerACL.tsx

@@ -1,5 +1,18 @@
 import React, { useCallback, useRef, useState } from 'react';
-import { Box, Button, Icon, IconButton, Icons, Scroll, Spinner, Text, color, config } from 'folds';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Scroll,
+  Spinner,
+  Text,
+  color,
+  config,
+} from 'folds';
 import { Page, PageContent, PageHeader } from '../../components/page';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoom } from '../../hooks/useRoom';
@@ -97,22 +110,14 @@ function ServerList({ label, entries, canEdit, onAdd, onRemove }: ServerListProp
 
       {canEdit && (
         <Box direction="Column" gap="100">
-          <input
+          <Input
             ref={inputRef}
             type="text"
             placeholder="e.g. *.example.com or badserver.org"
             onKeyDown={handleKeyDown}
-            style={{
-              background: color.Surface.Container,
-              color: color.Surface.OnContainer,
-              border: `1px solid ${error ? color.Critical.Main : color.Surface.ContainerLine}`,
-              borderRadius: config.radii.R300,
-              padding: `${config.space.S200} ${config.space.S300}`,
-              fontSize: 'inherit',
-              fontFamily: 'inherit',
-              width: '100%',
-              boxSizing: 'border-box',
-            }}
+            variant={error ? 'Critical' : 'Secondary'}
+            size="400"
+            radii="300"
           />
           {error && (
             <Text size="T200" style={{ color: color.Critical.Main }}>
@@ -295,18 +300,13 @@ export function RoomServerACL({ requestClose }: RoomServerACLProps) {
                   gap="200"
                 >
                   <Box alignItems="Center" gap="300">
-                    <input
-                      type="checkbox"
+                    <Checkbox
                       id="allow-ip-literals"
                       checked={allowIpLiterals}
                       disabled={!canEdit}
-                      onChange={(e) => setAllowIpLiterals(e.target.checked)}
-                      style={{
-                        width: 16,
-                        height: 16,
-                        flexShrink: 0,
-                        cursor: canEdit ? 'pointer' : 'default',
-                      }}
+                      onClick={() => setAllowIpLiterals(!allowIpLiterals)}
+                      size="300"
+                      variant="Primary"
                     />
                     <Box direction="Column" gap="0">
                       {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}