html.sv-pwa-mobileApp,
html.sv-pwa-mobileApp body{
  background: var(--sv-card) !important;
}

@media (max-width:980px){
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage){
    --sv113-page-pad: clamp(10px, 3.2vw, 14px);
    --sv-bg: var(--sv-card);
    background: var(--sv-card) !important;
  }

  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-shell,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-pad,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) main,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) #sv-feed,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-top,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-bottom{
    background: var(--sv-card) !important;
  }

  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-top{
    border-bottom-color: color-mix(in srgb, var(--sv-border) 92%, transparent) !important;
    box-shadow: none !important;
  }

  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-bottom{
    border-color: color-mix(in srgb, var(--sv-border) 92%, transparent) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.12) !important;
  }

  /* Full-width feed cards on mobile PWA without stretching repost wrappers */
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-shell > .sv-feed,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-pad > .sv-feed,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) #sv-feed.sv-feed{
    width: calc(100% + (var(--sv113-page-pad) * 2)) !important;
    max-width: none !important;
    margin-left: calc(var(--sv113-page-pad) * -1) !important;
    margin-right: calc(var(--sv113-page-pad) * -1) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card{
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card > .sv-head,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card > .sv-body,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card > .sv-actions{
    padding-left: var(--sv113-page-pad) !important;
    padding-right: var(--sv113-page-pad) !important;
  }

  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-media,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-gallery,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-mediaVideo,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-igMediaOuter{
    border-radius: 0 !important;
  }

  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-repostBox,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-repostBoxV2,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-repostMissing{
    margin-left: var(--sv113-page-pad) !important;
    margin-right: var(--sv113-page-pad) !important;
    border-radius: 16px !important;
  }

  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-repostCard,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-repostMedia,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-repostGallery,
  html.sv-pwa-mobileApp body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-feed > .sv-card .sv-repostMediaOuter{
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* Smooth return feel when going back */
  html.sv-pwa-mobileApp.sv113-back-smooth body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-shell,
  html.sv-pwa-mobileApp.sv113-back-smooth body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-pad,
  html.sv-pwa-mobileApp.sv113-back-smooth body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) #sv-feed{
    animation: sv113BackSlide .22s cubic-bezier(.22,.8,.2,1) both;
  }

  html.sv-pwa-mobileApp.sv113-nav-out body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-shell,
  html.sv-pwa-mobileApp.sv113-nav-out body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) .sv-pad,
  html.sv-pwa-mobileApp.sv113-nav-out body:not(.sv-auth-page):not(.sv-authPage):not(.sv-reelsPage) #sv-feed{
    opacity: .985;
    transform: translateX(8px);
    transition: transform .18s ease, opacity .18s ease;
  }
}

@keyframes sv113BackSlide {
  from {
    opacity: .72;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}