fix(pwa): respect iOS safe-area-inset on body + sticky/fixed headers

В iOS PWA при viewport-fit=cover и apple-mobile-web-app-status-bar-style=
black-translucent статус-бар прозрачно накладывается на шапки страниц
(пользователи жаловались скринами с overlap «11:37» поверх «Ремонт #12»).

Body теперь имеет padding-top/bottom env(safe-area-inset-*) — fix initial-
рендер и нижних кнопок. Для sticky/fixed .top-0 хедеров отдельно overrid'им
top: env(safe-area-inset-top), т.к. sticky прилипает к top:0 viewport, а
не к содержимому body. Селектор узкий (.sticky.top-0 / .fixed.top-0) —
не задевает .fixed.inset-0 полноэкранные модалки.

mechanic-pwa/frontend/src/index.css

@@ -31,5 +31,20 @@
   * { @apply border-border; }
   body {
     @apply bg-background text-foreground font-sans;
+    /* iOS PWA: status bar (status-bar-style=black-translucent) и home-indicator
+       перекрывают контент при viewport-fit=cover. Сдвигаем body content вниз
+       на высоту safe-area, чтобы шапки/кнопки не уезжали под системные зоны. */
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+@layer utilities {
+  /* iOS PWA: position:sticky + top:0 прилипает к самому верху viewport,
+     т.е. под статус-бар (containing-block тут не помогает). Переопределяем
+     top у всех Tailwind .top-0, чтобы шапки залипали ниже notch. */
+  .sticky.top-0,
+  .fixed.top-0 {
+    top: env(safe-area-inset-top);
   }
 }