diff --git a/src/accounts/SignIn.tsx b/src/accounts/SignIn.tsx
index bd6c95b..73fa34d 100644
--- a/src/accounts/SignIn.tsx
+++ b/src/accounts/SignIn.tsx
@@ -138,6 +138,9 @@ const SignIn: Component = () => {
         aria-describedby={
           currentState() !== "inactive" ? progressId : undefined
         }
+        style={{
+          padding: `var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left)`,
+        }}
       >
         <LinearProgress
           class={[cards.cardNoPad, cards.cardGutSkip].join(" ")}
diff --git a/src/material/cards.module.css b/src/material/cards.module.css
index 2b1cc41..6199bf7 100644
--- a/src/material/cards.module.css
+++ b/src/material/cards.module.css
@@ -12,7 +12,7 @@
   }
 
   &:not(.manualMargin) {
-    & > :not(.cardNoPad) {
+    &> :not(.cardNoPad) {
       margin-inline: var(--card-pad, 20px);
     }
 
@@ -20,7 +20,7 @@
       margin-top: var(--card-gut, 20px);
     }
 
-    > .cardGutSkip + *:not(.cardGutSkip) {
+    >.cardGutSkip+*:not(.cardGutSkip) {
       margin-top: var(--card-gut, 20px);
     }